import React, {useEffect, useState} from 'react';
import { Picker, showToast, Text, View } from 'ray';
import clsx from 'clsx';
import styles from '@/pages/home/index.module.less';
import Strings from '@/i18n';
import { Dialog, Field, Icon } from '@ray-js/smart-ui';
import Right from '@tuya-miniapp/icons/dist/svg/Right';
import { useActions, useProps } from '@ray-js/panel-sdk';

interface IProps {
  power: boolean;
  aromaName: string;
}

export default function AromaCard({ power, aromaName }: IProps) {
  const actions = useActions();

  const [aromaNameField, setAromaNameField] = useState<string>('');
  const [showAromaNameDialog, setShowAromaNameDialog] = useState(false);

  // 处理精油名称确认
  const handleAromaNameConfirm = () => {
    if (aromaNameField.trim() === '') {
      showToast({ title: Strings.getLang('toast1') });
      return;
    }
    setShowAromaNameDialog(false);
    actions.aroma_name.set(aromaNameField);
    showToast({ title: Strings.getLang('toast2') });
    setAromaNameField('');
  };

  useEffect(() => {
    if (aromaNameField.length>=6){
      showToast({ title: Strings.getLang('scent_description') });
    }
  }, [aromaNameField]);

  return (
    <>
      <View
        className={clsx(styles.card, {
          [styles.disabled]: !power,
        })}
        style={{
          gap: 30,
        }}
        onClick={() => {
          if (!power) return;
          setAromaNameField(aromaName);
          setShowAromaNameDialog(true);
        }}
      >
        <View className={styles.modeHeader}>
          <View
            className={styles.flexBetween}
          >
            <Text>{Strings.getLang('scentName')}</Text>
          </View>
          <View className={styles.modeRightBox}>
            <Text>{aromaName}</Text>
            <Icon name={Right} color="#BDBEBF" />
          </View>
        </View>
      </View>

      <Dialog
        useSlot
        title={Strings.getLang('scent')}
        show={showAromaNameDialog}
        showCancelButton
        confirmButtonText={Strings.getLang('confirm')}
        cancelButtonText={Strings.getLang('cancel')}
        onClose={() => setShowAromaNameDialog(false)}
        onConfirm={handleAromaNameConfirm}
      >
        <View style={{ marginBottom: 20 }}>
          <Field
            value={aromaNameField}
            placeholder={Strings.getLang('scent_description')}
            maxlength={6}
            border
            clearable
            inputAlign="left"
            onChange={(e: any) => setAromaNameField(e.detail)}
          />
        </View>
      </Dialog>
    </>
  );
}
